.state-indicator {
  // Block properties
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  color: white;
  font-weight: bold;
  position: relative;
  box-sizing: border-box;
  
  // Element
  &__text {
    text-align: center;
  }
  
  // Modifiers for different states
  &--running {
    background-color: #2a7d2e; // Green for running
  }
  
  &--starting {
    background-color: #e67e22; // Orange for starting, pending, loading
  }
  
  &--stopping {
    background-color: #e67e22; // Orange for stopping
  }
  
  &--stopped {
    background-color: #e74c3c; // Red for stopped
  }
  
  // &--loading style removed as it will use 'starting' modifier
  
  &--unauthenticated {
    background-color: #34495e; // Dark blue for unauthenticated
  }
  
  &--error {
    background-color: #aaaaaa; // Light gray for error
  }
  
  &--unknown {
    background-color: #555; // Dark gray for unknown
  }
}
